<template>
	<div class=".bg">
		<div class="banner"  @click="toupiao">
			<image :src="poster" mode="widthFix"></image>
		</div>
		<div class="user">
			<div class="name" @click="showTree = true">
				<label>投票人员：</label>
				<div class="namespace" v-text="toupiao_user || '请选择姓名'"></div>
			</div>
		</div>
		<div class="treeBox" v-if="showTree">
			<div class="treeContent">
				
				<div class="nameBox" >
					<div class="bm_list">
						<div class="bm_list_con">
							<div class="bm_tlt">请选择姓名</div>
							<div class="searchBox">
								<u-search placeholder="请输入名称" v-model="searchName"></u-search>
							</div>
							<ul>
								<li v-for="(name,i) in filterName" :key="i" :class="toupiao_user == name.name ? 'active' : ''" @click="toupiao_user = name.name">{{name.name}}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="confirmBox">
					<u-button type="primary" block @click="checkUser()" color="#d9232f">确认选择</u-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				poster: "https://www.baixuemianshi.com/zhuanti/peidui/images/poster.jpg?" + new Date(),
				searchName:"",
				alluser: [],
				info:"",
				showTree: true,
				toupiao_user:"",
				userInfo:{
					name:"",
					num:""
				}
				
				
			}
		},
		onShareAppMessage(res) {},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			filterName(){
				let that = this
				let arr = []
				if(that.searchName){
					arr = that.alluser.filter(item => item.name.indexOf(that.searchName) != -1)
				}else{
					arr = that.alluser
				}
				return arr
			}
		},
		created() {
			let that = this;
			
			that.getUserList()
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone']),
			getUserList(){
				let that = this
				uni.request({
					url: "https://www.baixuemianshi.com/zhuanti/peidui/js/allUser.js",
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.alluser = resjson
						
						let tu = wx.getStorageSync("tpUser");
						if(tu){
							that.toupiao_user = tu
							that.showTree = false
							let u = that.alluser.filter(item => item.name == that.toupiao_user)
							that.userInfo.name = u[0].name
							that.userInfo.num = u[0].num
						}
					}
				});
			},
			
			sectionChange(index){
				this.current = index;
				this.nameIndex = 0
			},
			
			checkUser(){
				let that = this
				if(!that.toupiao_user){
					uni.showToast({
						title:"请选择姓名",
						icon:"error"
					})
					return
				}
				let u = that.alluser.filter(item => item.name == that.toupiao_user)
				that.userInfo.name = u[0].name
				that.userInfo.num = u[0].num
				that.showTree = false
				wx.setStorageSync('tpUser', that.toupiao_user)
			},
			toupiao(page){
				let that = this
				if(!this.toupiao_user){
					this.showTree = true
					return 
				}
				db.collection("peidui_user").add({
					data:{
						name:that.userInfo.name
					},
					success: res => {
						let href = "https://www.baixuemianshi.com/zhuanti/peidui/?name=" + that.userInfo.name + "&num=" + that.userInfo.num
						uni.navigateTo({
							url:"../../webview/index?href=" + encodeURIComponent(href)
						})
					},
					fail:res=>{
						let href = "https://www.baixuemianshi.com/zhuanti/peidui/?name=" + that.userInfo.name + "&num=" + that.userInfo.num
						uni.navigateTo({
							url:"../../webview/index?href=" + encodeURIComponent(href)
						})
					}
				})
				
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>